<template>
  <div class="header" :class="[showHeader]" >
     <div class="header-back" :class="[showBack]"><!-- iconfont官方图标 -->
      <span class="iconfont">&#xeb0f;</span>
    </div>
    <div class="header-search" :class="[showSearch]">
      <span class="iconfont">&#xe782;</span>
      上海海昌海洋公园
    </div>
    <router-link to="/location">
        <div class="header-city" :class="[showCity]">
          {{this.$store.state.city}}
          <span class="iconfont">&#xeb0a;</span>
        </div>
     </router-link>
  </div>
</template>

<script>
export default {
  name: 'homeHeader',
  props:['city'],
  data () {
    return {
       showHeader:'',
       showBack:'',
       showSearch:'',
       showCity:''
    }
  },
   methods:{
      scrollchange(){
        let height = document.documentElement.scrollTop
        //console.log(height) //判断屏幕滚动得距离
        if(height>10){
           this.showHeader='showHeader'
           this.showBack='showBack'
           this.showSearch='showSearch'
           this.showCity='showCity'
        }else{
           this.showHeader=''
           this.showBack=''
           this.showSearch=''
           this.showCity=''
        }
      }
  },
  mounted(){
      window.addEventListener('scroll',
      this.scrollchange)
  }
}
</script>

<style lang="stylus" scoped>
   .showHeader
     background :#fff
   .header
      line-height :.88rem
      text-align :center
      display :flex
      .showBack
         color :#000
     .header-back
        float left
        width :.9rem
     .header-search
         flex 1
         height :.6rem
         line-height :.6rem
         margin-top :.2rem
         margin-left :.2rem
         margin-right :.2rem
         border-radius:.5rem
         box-shadow:0 0 .01rem .02rem #ccc
         background :white
      .showSearch
        color :#aaa
        background :#eee
      .header-city
         float:right
         width :1.4rem      
      .showCity
        color :#000
</style>
